<template>
  <view>
    <uni-segmented-control :current="current" :values="items" :style-type="styleType"
                           :active-color="activeColor" @clickItem="onClickItem" />
    <view class="content">
      <view v-if="current === 0"><text class="content-text">选项卡1的内容</text></view>
      <view v-if="current === 1"><text class="content-text">选项卡2的内容</text></view>
      <view v-if="current === 2"><text class="content-text">选项卡3的内容</text></view>
    </view>
  </view>
</template>

<script setup lang="js">
const current=ref(0)
const items=ref(['选项卡1', '选项卡2', '选项卡3'],)
const styleType=ref('button')
const activeColor=ref('red')//16进制也支持
function onClickItem(e) {
  console.log("index="+e.currentIndex)
  if (current.value !== e.currentIndex) {
    current.value = e.currentIndex
  }
  console.log(`index=${current.value}`)
}
</script>


<style scoped lang="scss">
.content{
  height: 100%;
  width: 100%;
}
</style>
